<template>
    <div id="container">
        <div id="viewDiv"></div>
        <div id="tool_panel" :style="{backgroundColor:store.state.theme==='dark'?'rgb(50,50,50)':'rgb(240,240,240)'}">
            <el-tabs style="width:100%;height:100%" type="border-card"  v-model="tabsValue">
                
                <el-tab-pane name="V-SHOW" label="V-SHOW">
                    <el-radio-group v-model="tabs_VSHOW_radioValue">
                        <el-radio-button value="显示" label="显示"></el-radio-button>
                        <el-radio-button value="隐藏" label="隐藏"></el-radio-button>
                    </el-radio-group >
                    <img src="./images/image1.png" v-show="tabs_VSHOW_radioValue==='显示'?true:false" 
                    style="width:100%;height:170px;margin-top:15px;border:1px solid gray">
                </el-tab-pane>
                
                <el-tab-pane name="V-IF" label="V-IF">
                    <el-radio-group v-model="tabs_VIF_radioValue">
                        <el-radio-button value="显示" label="显示"></el-radio-button>
                        <el-radio-button value="隐藏" label="隐藏"></el-radio-button>
                    </el-radio-group >
                    <img src="./images/image2.png" v-if="tabs_VIF_radioValue==='显示'?true:false" 
                        style="width:100%;height:170px;margin-top:15px;border:1px solid gray">
                </el-tab-pane>
                
                <el-tab-pane name="V-IF-ELSE" label="V-IF-ELSE">
                    <el-space>
                        <el-text >滑动滑块查看图片变化</el-text>
                        <el-slider style="width:270px" :min="0" :max="100" steps="1" v-model="tabs_VIFELSE_sliderValue" :marks="tabs_VIFELSE_sliderMarks" size="large"></el-slider>
                    </el-space>
                    <img src="./images/image1.png" v-if="tabs_VIFELSE_sliderValue<34" 
                        style="width:100%;height:170px;margin-top:15px;border:1px solid gray">
                    <img src="./images/image2.png" v-else-if="tabs_VIFELSE_sliderValue<67" 
                        style="width:100%;height:170px;margin-top:15px;border:1px solid gray">
                    <img src="./images/image3.png" v-else style="width:100%;height:170px;margin-top:15px;
                        border:1px solid gray">
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import {深色底图,灰色底图} from '../底图库'
import {onMounted,ref} from 'vue'
import Map from "@arcgis/core/Map.js"
import MapView from '@arcgis/core/views/MapView'
import { useStore } from 'vuex'
const tabs_VSHOW_radioValue=ref("显示")
const tabs_VIF_radioValue=ref("显示")
const tabsValue=ref("V-SHOW")
const tabs_VIFELSE_sliderValue=ref(50)
const message=ref('')
const tabs_VIFELSE_sliderMarks=ref({
    34:"34",
    67:"67"
})
const store=useStore()//加载store对象
var map,view
onMounted(()=>{
    map=new Map({
            basemap:{
                    baseLayers:[]
            }
    })
    switch(store.state.theme){
            case "dark":
                    map.basemap.baseLayers.add(深色底图) 
                    break
            case "light":
                    map.basemap.baseLayers.add(灰色底图)
                    break
    }
    view=new MapView({
            map:map, container:"viewDiv", zoom:2, 
            constraints:{
                    rotationEnabled:false,
                    maxScale:1300
            }
    })
    view.ui.remove(["zoom","attribution"])

})
</script>

<style scoped>
    #viewDiv,#container{
            height:100%;width:100%;padding:0;margin:0;
    }
    #tool_panel{
        position:absolute;top:15px;  left:15px;
        box-shadow:0 0 5px gray;
        border-radius:2px;width:450px;height:300px;overflow: hidden;
    }
    div{
        font-size:0
    }
</style>